<template>
	<view class="app-container">
		<uni-row>
			<uni-col :span="24" class="card-box">
				<uni-card>
					<view class="uni-table uni-table--enable-row-hover uni-table--medium">
						<view style="vertical-align: middle;">CPU</view>
						<uni-table style="width: 100%;">
							<uni-tr>
								<uni-th>
									<view class="cell">属性</view>
								</uni-th>
								<uni-th>
									<view class="cell">值</view>
								</uni-th>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">核心数</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">用户使用率</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.cpu">{{ server.cpu.used }}%</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">系统使用率</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">当前空闲率</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.cpu">{{ server.cpu.free }}%</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-col>

			<uni-col :span="24" class="card-box">
				<uni-card>
					<view class="uni-table uni-table--enable-row-hover uni-table--medium">
						<view style="vertical-align: middle;">内存</view>
						<uni-table style="width: 100%;">
							<uni-tr>
								<uni-th>
									<view class="cell">属性</view>
								</uni-th>
								<uni-th>
									<view class="cell">内存</view>
								</uni-th>
								<uni-th>
									<view class="cell">JVM</view>
								</uni-th>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">总内存</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.mem">{{ server.mem.total }}G</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.total }}M</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">已用内存</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.mem">{{ server.mem.used}}G</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.used}}M</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">剩余内存</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.mem">{{ server.mem.free }}G</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.free }}M</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">使用率</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.mem"
										:class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%
									</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm"
										:class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-col>

			<uni-col :span="24" class="card-box">
				<uni-card>
					<view class="uni-table uni-table--enable-row-hover uni-table--medium">
						<view style="vertical-align: middle;">服务器信息</view>
						<uni-table style="width: 100%;">
							<uni-tr>
								<uni-td>
									<view class="cell">服务器名称</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.sys">{{ server.sys.computerName }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">操作系统</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.sys">{{ server.sys.osName }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">服务器IP</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.sys">{{ server.sys.computerIp }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">系统架构</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.sys">{{ server.sys.osArch }}</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-col>

			<uni-col :span="24" class="card-box">
				<uni-card>
					<view class="uni-table uni-table--enable-row-hover uni-table--medium">
						<view style="vertical-align: middle;">Java虚拟机信息</view>
						<uni-table style="width: 100%;table-layout:fixed;">
							<uni-tr>
								<uni-td>
									<view class="cell">Java名称</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.name }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">Java版本</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.version }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">启动时间</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td>
									<view class="cell">运行时长</view>
								</uni-td>
								<uni-td>
									<view class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td colspan="1">
									<view class="cell">安装路径</view>
								</uni-td>
								<uni-td colspan="3">
									<view class="cell" v-if="server.jvm">{{ server.jvm.home }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td colspan="1">
									<view class="cell">项目路径</view>
								</uni-td>
								<uni-td colspan="3">
									<view class="cell" v-if="server.sys">{{ server.sys.userDir }}</view>
								</uni-td>
							</uni-tr>
							<uni-tr>
								<uni-td colspan="1">
									<view class="cell">运行参数</view>
								</uni-td>
								<uni-td colspan="3">
									<view class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-col>

			<uni-col :span="24" class="card-box">
				<uni-card>
					<view class="uni-table uni-table--enable-row-hover uni-table--medium">
						<view style="vertical-align: middle;">磁盘状态</view>
						<uni-table style="width: 100%;">
							<uni-tr>
								<uni-th>
									<view class="cell">盘符路径</view>
								</uni-th>
								<uni-th>
									<view class="cell">文件系统</view>
								</uni-th>
								<uni-th>
									<view class="cell">盘符类型</view>
								</uni-th>
								<uni-th>
									<view class="cell">总大小</view>
								</uni-th>
								<uni-th>
									<view class="cell">可用大小</view>
								</uni-th>
								<uni-th>
									<view class="cell">已用大小</view>
								</uni-th>
								<uni-th>
									<view class="cell">已用百分比</view>
								</uni-th>
							</uni-tr>
							<uni-tr v-if="server.sysFiles" v-for="(sysFile, index) in server.sysFiles" :key="index">
								<uni-td>
									<view class="cell">{{ sysFile.dirName }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">{{ sysFile.sysTypeName }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">{{ sysFile.typeName }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">{{ sysFile.total }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">{{ sysFile.free }}</view>
								</uni-td>
								<uni-td>
									<view class="cell">{{ sysFile.used }}</view>
								</uni-td>
								<uni-td>
									<view class="cell" :class="{'text-danger': sysFile.usage > 80}">
										{{ sysFile.usage }}%
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
	import {
		getServer
	} from '@/pages_work/api/monitor/server'
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	const server = ref([]);
	const {
		proxy
	} = getCurrentInstance();

	function getList() {
		proxy.$modal.loading("正在加载服务监控数据，请稍候！");
		getServer().then(response => {
			server.value = response.data;
			proxy.$modal.closeLoading();
		});
	}

	getList();
</script>